
<include file="Common/header" />

<div class="app">

    <!-- top header -->
    <include file="Common/header_nav" />
    <!-- /top header -->

    <section class="layout">
        <!-- sidebar menu -->
        <include file="Common/left_aside" />
        <!-- /sidebar menu -->

        <!-- main content -->
        <section class="main-content">

            <!-- content wrapper -->
            <div class="content-wrap">

                <div class="row">
                    <div class="col-md-6 col-lg-offset-3 add-margin-top">
                        <section class="panel">
                            <header class="panel-heading"><h3 align="center">{$quiz_title}</h3><a id="quiz_id" style="display: none;">{$quiz_id}</a></header>
                            <div class="panel-body">
                                <div class="form-group">
                                    <div class="row">

                                        <div class="col-sm-10 col-sm-offset-1" id="qlabels">
                                            <div class="row mg-b">
                                                <div class="col-sm-12">
                                                    读取中...
                                                </div>
                                            </div>


                                        </div>
                                        <div class="col-sm-10 col-sm-offset-1">
                                            <div class="progress progress-lg">
                                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 100%" id="qpercent">
                                                    <span class="sr-only">40% Complete (success)</span>
                                                </div>
                                            </div>
                                        </div>

                                    </div >
                                </div>
                            </div>
                        </section>
                    </div>
                </div>

            </div>
            <!-- /content wrapper -->

        </section>
        <!-- /main content -->

    </section>

</div>



<include file="Common/footer" />

<!--<script src="__ROOT__/Public/asset/vendor/fuelux/radio.js"></script>-->

<script>

    function getQuestion()
    {
        var qid ;//返回给页面的qid

        $.ajax({
            type:"POST",
            url:"__URL__/getQuestion/quiz_id/" + $("#quiz_id").text(),
            dataType:"json",
            async : false,
            data:{
                uid:1
            },

            success:function(data){
                if (data.code == -1){
                    var htmls = ['<div class="row mg-b">'+'<div class="col-sm-12">'+
                    '<h4 align="center"><b id="qtitle">做完问卷了哦！ </b></h4>'
                    + ' <div style="float:none;margin: 0 auto; width: 142px;">' + '<a class="btn btn-success btn-lg" href="/Home/MyQuiz/MyReport">查看我的报告</a>' + '</div></div></div>'
                    ];

                    $("#qlabels").html(htmls.join(''));
                }
                else{
                    var htmls=['<h4><b>'+data.qst_commant+'</b></h4>'];
                    qid=data.qst_id;
                    for (var i = 0; i <  Object.keys(data).length - 3; i++ ){
                        var key = 'option'+ (i + 1);
                        htmls.push('<label class="radio radio-custom highlight check_area">');
                        htmls.push('<i class="radio "></i>'+data[key]+'</label>');

                    }
                    htmls.push('<label id="q_count">'+(data.qst_id) +'</label>');
                    htmls.push('/');
                    htmls.push('<label id="total_count">'+data.count+'</label>');

                    var totalPercent = ((data.qst_id)/data.count)*100;
                    totalPercent = totalPercent.toFixed(2);

                    $("#qlabels").html(htmls.join(''));
                    $("#qpercent").attr("style", "width:"+totalPercent+"%");
                }

            },failure: function () {
                alert("failed");
            }
        });
        return qid;
    }


    $(document).ready(function(){
        //var qcount = 1;
        var qid = getQuestion();//获得问题的qid

        //alert(qid);
        var $area = $(".check_area");

        $(document).on('click','.check_area',  function () {


                var total_count = $("#total_count").html();
                var q_count = $("#q_count").html();

                $area.find(":radio").attr("checked",false);
                $area.find("i").removeClass("checked");
                $area.removeClass("checked");

                var index = $(this).index();
                index -= 1;
                var $opt = $(".check_area:eq("+index+")");
                $opt.addClass("checked");
                $opt.eq(0).find("i").addClass("checked");
                $opt.eq(0).find(":radio").attr("checked",true);


                index += 1;
                //index is answer
                $.ajax({
                    url:"__URL__/submitAnswer/quiz_id/" + $("#quiz_id").html(),
                    dataType:"json",
                    type:"POST",
                    data:{
                        uid:1,
                        qid:qid,
                        answer:index
                    },
                    success:function(data){
                        if (data.code == 1){
                            console.log(q_count);
                            console.log(total_count);
                            if (q_count == total_count){

                                var htmls = ['<div class="row mg-b">'+'<div class="col-sm-12">'+
                                '<h4 align="center"><b id="qtitle">真棒！您已经完成了问卷！ </b></h4>'
                                + ' <div style="float:none;margin: 0 auto; width: 142px;">' + '<a class="btn btn-success btn-lg" href="/Home/MyQuiz/MyReport">查看我的报告</a>' + '</div></div></div>'
                                ];

                                $("#qlabels").html(htmls.join(''));

                               // alert("做完了，即将计算结果！");
                                $.ajax({
                                    url:"/Home/StartQuiz/calcAnswer/quiz_id/" + $("#quiz_id").text(),
                                    dataType:"json",
                                    type:"GET",
                                    success:function(data){
                                        if (data.code == 1){
                                            alert(data.msg);
                                            window.location.href="/Home/MyQuiz/MyReport";
                                        }
                                        else{
                                            alert("计算失败！" + data.msg);
                                        }
                                    }
                                })
                            }
                            else{
                                qid = getQuestion();
                            }
                        }
                        else{
                            alert(data);
                        }
                    }

                });


        });

    });

</script>